<template>
  <transition
    :css="false"
    @enter='enter'
    @leave='leave'>
    <div class="normalplayer" v-show="this.isFullPlayer" ref="normalplayer">
      <div class="bg">
        <img :src="this.currentSong.picUrl" alt="">
      </div>
      <div class="mainview">
        <PlayerHeader></PlayerHeader>
        <PlayerMiddle :currentTime='this.currentTime'></PlayerMiddle>
        <PlayerBottom :SongTime='this.songTime' :currentTime='this.currentTime'></PlayerBottom>
      </div>
    </div>
  </transition>
</template>

<script>
import PlayerHeader from './PlayerHeader.vue'
import PlayerMiddle from './PlayerMiddle.vue'
import PlayerBottom from './PlayerBottom.vue'
import { mapGetters, mapActions } from 'vuex'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
export default {
  name: 'nomalPlayer',
  data () { return {} },
  props: {
    songTime: {
      type: Number,
      default: 0,
      required: true
    },
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  },
  computed: {
    ...mapGetters([
      'isFullPlayer',
      'currentSong'
    ])
  },
  components: {
    PlayerHeader,
    PlayerMiddle,
    PlayerBottom
  },
  methods: {
    ...mapActions([
      'setSongLyric'
    ]),
    enter (el, done) {
      Velocity(el, 'transition.bounceUpIn', { duration: 1000, delay: 500 }, function () {
        done()
      })
    },
    leave (el, done) {
      Velocity(el, 'transition.bounceDownOut', { duration: 1000 }, function () {
        done()
      })
    }
  },
  watch: {
    currentSong (newValue, oldValue) {
      if (newValue.id === undefined) {
        return
      }
      this.setSongLyric(newValue.id)
    }
  }
}
</script>

<style scoped lang='scss'>
  .normalplayer{
    position: fixed;//把App.vue的内容盖住
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .mainview{
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: 999;
    }
    .bg{
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      img{
        // position: absolute;
        height: 100%;
        width: 100%;
        filter: blur(20px);
      }
      // background: pink;
    }
  }
</style>
